<div class="modal-header modern-header">
    <h4 class="modal-title">
        <fa-icon [icon]="'sync'" [spin]="!displayApplicationUrl"></fa-icon>
        <span *ngIf="!displayApplicationUrl">&nbsp;正在生成应用程序</span>
    </h4>
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
            (click)="clear()">&times;
    </button>
</div>
<div class="modal-body modern-body">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <pre class="logs-container">
正在向服务器发送请求...
{{logs}}
                </pre>
            </div>
        </div>
        <div class="row" *ngIf="displayApplicationUrl && githubConfigured && selectedGitProvider === 'GitHub'">
            <div class="col-md-12">
                <div class="success-message">
                    <div class="success-icon"><fa-icon [icon]="'check-circle'"></fa-icon></div>
                    <div class="lead">
                        <b>应用程序已生成！</b><br/>在此处打开您的GitHub仓库 <a href="{{githubHost}}/{{selectedGitCompany}}/{{repositoryName}}" target="_blank">{{githubHost}}/{{selectedGitCompany}}/{{repositoryName}}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" *ngIf="displayApplicationUrl && gitlabConfigured && selectedGitProvider === 'GitLab'">
            <div class="col-md-12">
                <div class="success-message">
                    <div class="success-icon"><fa-icon [icon]="'check-circle'"></fa-icon></div>
                    <div class="lead">
                        <b>应用程序已生成！</b><br/>在此处打开您的GitLab仓库 <a href="{{gitlabHost}}/{{selectedGitCompany}}/{{repositoryName}}" target="_blank">{{gitlabHost}}/{{selectedGitCompany}}/{{repositoryName}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer modern-footer">
    <button type="submit" (click)="clear()" class="btn btn-primary btn-lg">
        <fa-icon [icon]="'times-circle'"></fa-icon>&nbsp;关闭此窗口
    </button>
</div>

<style>
    .modern-header {
        background-color: #3e8acc;
        color: white;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom: none;
    }
    
    .modern-header .modal-title {
        color: white;
    }
    
    .modern-header .close {
        color: white;
        opacity: 0.8;
    }
    
    .modern-header .close:hover {
        opacity: 1;
    }
    
    .modern-body {
        padding: 20px;
    }
    
    .logs-container {
        background-color: #f8f9fa;
        border-radius: 4px;
        padding: 15px;
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid #e9ecef;
    }
    
    .success-message {
        background-color: #f1f9f1;
        border-radius: 8px;
        padding: 20px;
        margin-top: 15px;
        border-left: 4px solid #28a745;
        display: flex;
        align-items: center;
    }
    
    .success-icon {
        color: #28a745;
        font-size: 24px;
        margin-right: 15px;
    }
    
    .lead {
        margin-bottom: 0;
    }
    
    .lead a {
        color: #3e8acc;
        text-decoration: none;
    }
    
    .lead a:hover {
        text-decoration: underline;
    }
    
    .modern-footer {
        border-top: 1px solid #e9ecef;
        padding: 15px;
    }
    
    .btn-primary {
        background-color: #3e8acc;
        border-color: #3e8acc;
        border-radius: 4px;
        padding: 10px 20px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
        background-color: #3579b5;
        border-color: #3579b5;
    }
</style>
